<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>心里健康SCL</title>
    <script src="${pageContext.request.contextPath}/static/jquery-3.6.1.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/static/layui-v2.7.6/layui/layui.js"></script>
</head>
<body>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <%--添加表格--%>
            <button class="layui-btn layui-btn-sm" lay-event="importExcel">批量导入excel数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="addSCL">添加</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">是否全选</button>
    </div>
</script>
<div class="layui-btn-container" id="upddiv" style="display: none">
    <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
    <button type="button" class="layui-btn" id="test9">开始上传</button>
</div>
<form class="layui-form" action=""  id="SCLFrom" style="display: none"  lay-filter="updateSCLFormFilter">
    <input type="text" name="id"  id="SCLaddandupd"  style="display: none">

    <form class="layui-form" action="" >

        <div class="registerbox-title">题目添加</div>

        <div class="layui-form-item" >
            <label class="layui-form-label">序号</label>
            <div class="layui-input-inline">
                <input  type="text" name="qid"  onblur="checkSCLqid(this)" lay-verify="required" placeholder="请输入序号" autocomplete="off"
                       class="layui-input" id="pass1">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">题目</label>
            <div class="layui-input-inline">
                <input type="text" name="question"   lay-verify="required" placeholder="请输入题目" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选项A</label>
            <div class="layui-input-inline">
                <input type="text" name="selecta"  lay-verify="required" placeholder="请输入选项" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">选项B</label>
            <div class="layui-input-inline">
                <input type="text" name="selectb"   lay-verify="required" placeholder="请输入选项" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">选项C</label>
            <div class="layui-input-inline">
                <input type="text" name="selectc"   lay-verify="required" placeholder="请输入选项" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">选项D</label>
            <div class="layui-input-inline">
                <input type="text" name="selectd"   lay-verify="required" placeholder="请输入选项" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">选项E</label>
            <div class="layui-input-inline">
                <input type="text" name="selecte"   lay-verify="required" placeholder="请输入选项" autocomplete="off"
                       class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="fromSCL">注册</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

    <form class="layui-form" action="">
        <%--题目编号模糊查询--%>
        <div class="layui-inline">
            <label class="layui-form-label">题号查询：</label>
            <div class="layui-input-inline">
                <input type="text" name="qid" placeholder="请输入题目编号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <%--题目模糊查询--%>
        <div class="layui-inline">
            <label class="layui-form-label">题目查询：</label>
            <div class="layui-input-inline">
                <input type="text" name="question" placeholder="请输入题目相关信息" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>



<table class="layui-hide" id="test" lay-filter = "test"></table>
        <!-- 注意：项目正式环境请勿引用该地址 -->
</form>
    <script>
        $(function (){
            layui.use(['table','layer','form','jquery'],function (){
                var table = layui.table;
                var layer = layui.layer;
                var form = layui.form;
                var $ = layui.jquery;
                var upload = layui.upload
                    , element = layui.element;
                var namestatus=true;
                //执行一个 table 实例
                table.render({
                    // element  元素
                    elem: '#test'
                    ,page:true
                    ,limit:10
                    ,limits:[10,20,30,40]
                    ,toolbar: '#toolbarDemo'
                    ,url:'${pageContext.request.contextPath}/tscl/findAllSCL' //  表格了里面所需要的数据就是一个list里面有很多的map、对象
                    ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    ,cols: [[
                        {type: 'checkbox', fixed: 'left'}
                        // field 后面跟的内容  必须跟后台传过来的数据里面的map 的key保持一致
                        ,{field:'qid', title: '编号', sort: true}
                        ,{field:'question', title: '题目'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                        ,{field:'selecta', title: '选项A', sort: true}
                        ,{field:'selectb', title: '选项B', sort: true}
                        ,{field:'selectc', title: '选项C', sort: true}
                        ,{field:'selectd', title: '选项D', sort: true}
                        ,{field:'selecte', title: '选项D', sort: true}
                        ,{fixed: 'right', title:'操作', width: 125, minWidth: 125, toolbar: '#barDemo'}
                    ]]

                });

                // 查询
                form.on('submit(formDemo)', function(data){
                    console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
                    console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
                    console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                    table.reload('test', {
                        where: data.field,
                        page: {
                            curr: 1 //重新从第 1 页开始
                        },
                    });
                    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                });

                // 工具栏事件
                table.on('toolbar(test)', function(obj){
                    var uid = obj.config.uid;
                    var checkStatus = table.checkStatus(uid);
                    var othis = lay(this);
                    switch(obj.event){
                        case 'importExcel':
                            layer.open({
                                type: 1,
                                area: ['500px', '400px'],
                                offset: '100px',
                                content:$("#upddiv"),
                                cancel: function(index, layero){

                                    layer.close(index);
                                    $("#upddiv").hide();
                                    return false;
                                }

                            });
                            //选完文件后不自动上传
                            upload.render({
                                elem: '#test8'
                                ,url: '${pageContext.request.contextPath}/tscl/addAll' //此处配置你自己的上传接口即可
                                ,auto: false// 不自动上传
                                ,accept:"file" // 允许上传所有的文件
                                ,multiple: true
                                ,bindAction: '#test9' // 绑定上传的按钮
                                ,done: function(res){
                                    if(res.data==true){
                                        layer.msg("导入数据成功",{"icon":1});
                                        $("#upddiv").hide();
                                        layer.closeAll();
                                        //刷新页面
                                        table.reload('test');
                                    }
                                }
                            });

                            break;
                        case 'getCheckData':
                            var data = checkStatus.data;
                            layer.alert(layui.util.escape(JSON.stringify(data)));
                            break;
                        case 'getData':
                            var getData = table.getData(id);
                            console.log(getData);
                            layer.alert(layui.util.escape(JSON.stringify(getData)));
                            break;
                        case 'isAll':
                            layer.msg(checkStatus.isAll ? '全选': '未全选')
                            break;
                        case 'addSCL':
                            //重置表单
                            $("#SCLFrom")[0].reset();
                            $(".pass").css("display","block");
                            layer.open({
                                type:1,
                                area: ['500px', '400px'],
                                offset: '100px',
                                content:$("#SCLFrom"),
                                cancel: function(index, layero){
                                    layer.close(index);
                                    $("#SCLFrom").hide();
                                    return false;
                                }
                            });
                    };
                });


                //触发单元格工具事件
                //监听行工具事件
                table.on('tool(test)', function(obj){
                    var data = obj.data;
                    if(obj.event === 'edit'){
                        $(".pass").css("display","none");
                        layer.open({
                            type: 1,
                            area: ['500px', '400px'],
                            offset: '100px',
                            content:$("#SCLFrom"),
                            cancel: function(index, layero){
                                layer.close(index);
                                $("#SCLFrom").hide();
                                return false;
                            }
                        });
                        //获取表单行中的数据
                        form.val('updateSCLFormFilter',data);
                    }else if(obj.event === 'del'){

                        if(confirm("确定要删除该数据吗？")){
                            $.ajax({
                                url:"${pageContext.request.contextPath}/tscl/delSCL",
                                type:"post",
                                dataType:"JSON",
                                data:form.val('updateSCLFormFilter',data),//表单里所有数据
                                success:function (ret){
                                    if (ret.data == true){
                                        layer.msg("删除成功",{icon: "1"})
                                        //刷新页面
                                        table.reload('test');
                                    }else{
                                        layer.msg("删除失败！",{icon: "2"})
                                    }
                                }
                            })
                        }
                    }
                });


                //添加题目
                form.on('submit(fromSCL)', function(data){
                    if(namestatus){
                        $.ajax({
                            url:"${pageContext.request.contextPath}/tscl/addSCL",
                            type:"post",
                            dataType:"JSON",
                            data:data.field,//表单里所有数据
                            success:function (ret){
                                if (ret.data==true){
                                    $("#SCLaddandupd").html(null)
                                    //关闭所有弹框
                                    layer.closeAll();
                                    //刷新页面
                                    table.reload('test');
                                }
                            }
                        })
                    }
                    return false;
                });


                //检测题目序号是否存在
                checkSCLqid=function (obj){
                    namestatus=true;
                    $.ajax({
                        url:`${pageContext.request.contextPath}/tscl/checkQId`+obj.value,
                        type:"post",
                        success:function(d){
                            //alert(d.data);
                            if(d.data==true){
                                namestatus=false;
                                layer.msg("该用户名已经被使用");
                            }else if(d.data==false){
                                namestatus=true;
                                layer.msg("该用户名可以使用");
                            }
                        }
                    })
                }



            })
        })

    </script>
</body>
</html>
